<template>
  <div class="app-container">
    <div class="apply-form-container">
      <div class="header form-header">
        <h2>申请开课</h2>
      </div>
      <el-form ref="applyForm" :model="applyForm" label-width="120px">
        <el-form-item label="开设课程">
          <el-cascader class="cascader"
                       v-model="applyForm.applyCourse"
                       :options="selectOptions.courseOptions"
                       filterable clearable></el-cascader>
        </el-form-item>
        <el-form-item label="上课时间">
          <el-select v-model="applyForm.weekday" placeholder="选择 Weekday">
            <el-option v-for="item in weekday" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="applyForm.courseStartTime" placeholder="选择上课时间" @change="handleTimeChanged"
                     >
            <el-option v-for="item in startTime" :key="item.num" :label="'第'+item.num+'节'" :value="item.num">
              <span style="float: left">第{{item.num}}节</span>
              <span style="float: right">{{item.title}}</span>
            </el-option>
          </el-select>
          <el-select v-model="applyForm.courseEndTime" placeholder="选择下课时间" @change="handleTimeChanged"
                    >
            <el-option v-for="item in endTime" :key="item.num" :label="'第'+item.num+'节'" :value="item.num">
              <span style="float: left">第{{item.num}}节</span>
              <span style="float: right">{{item.title}}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课教室">
          <el-cascader class="cascader"
                       v-model="applyForm.applyRoom"
                       :options="selectOptions.roomOptions"
                       filterable clearable></el-cascader>
        </el-form-item>
        <el-form-item label="开课班级">
          <el-cascader
            v-model="applyForm.applyClazz"
            :options="selectOptions.clazzOptions"
            filterable
            :props="{ multiple: true }"
            clearable class="cascader"></el-cascader>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :autosize="{ minRows: 8}"
            placeholder="请输入内容"
            v-model="applyForm.applyMessage">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">提交申请</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="status-container">
      <div class="header">
        <h2>课程状态</h2>
      </div>
      <div class="status-components">
        <course-table :course-data="courseData"></course-table>
      </div>
    </div>
  </div>
</template>

<script>
  import courseApi from '@/api/course'
  import clazzApi from '@/api/clazz'
  import courseConfig from '@/components/Course/Table/config'
  import classroomApi from '@/api/classroom'
  import CrudHeader from '@/components/crud/CrudHeader/index'
  import CourseTable from '@/components/Course/Table'

  export default {
    components: { CrudHeader, CourseTable },
    data() {
      return {
        applyForm: {
          applyCourse: [],
          applyRoom: [],
          applyClazz: [],
          courseStartTime: '',
          courseEndTime: '',
          weekday: '',
          applyMessage: ''
        },
        selectOptions: {
          courseOptions: [],
          roomOptions: [],
          clazzOptions: []
        },
        courseData: undefined,
        conflict: {
          status: false,
          message: '',
        }
      }
    },
    methods: {
      timeConflictCheck() {
        let weekday = parseInt(this.applyForm.weekday)
        let startTime = this.applyForm.courseStartTime
        let endTime = this.applyForm.courseEndTime
        if (weekday && startTime && endTime) {
          for (let i = startTime - 1; i < endTime; i++) {
            let weekName = '_tb_' + Object.keys(courseConfig.WEEKDAY_MAPPER)[weekday];
            if (this.courseData[i][weekName]) {
              this.conflict = {
                status: true,
                message: '该时间段已和当前课表冲突'
              }
            }
          }
        }
      },
      handleTimeChanged() {
        if (!(this.applyForm.courseStartTime === '' || this.applyForm.courseEndTime === '') &&
          this.applyForm.courseStartTime > this.applyForm.courseEndTime) {
          this.applyForm.courseEndTime = ''
          this.applyForm.courseStartTime = ''
          this.$message({
            message: '下课时间不能早于上课时间',
            type: 'warning'
          })
        }
        this.timeConflictCheck();
      },
      async getCollegeCourse() {
        this.selectOptions.courseOptions = await courseApi.getCourseOptions()
      },
      async getClassRoom() {
        this.selectOptions.roomOptions = await classroomApi.getClassRoomOptions()
      },
      async getClazz() {
        this.selectOptions.clazzOptions = await clazzApi.getClazzOptions()
      },
      async getCourseTable() {
        let rawData = await courseApi.getCourseTable()
        this.courseData = await this.$store.dispatch('course/transform', rawData)
      },
      timeMapper: function(type) {
        let result = []
        let mapper = type ? courseConfig.COURSE_START_SCHEDULE : courseConfig.COURSE_END_SCHEDULE
        for (let item of Object.entries(mapper)) {
          result.push({
            num: parseInt(item[0]) + 1,
            title: item[1]
          })
        }
        return result
      }
    },
    created() {
      this.getCourseTable()
      this.getCollegeCourse()
      this.getClassRoom()
      this.getClazz()
    },
    computed: {
      startTime: function() {
        return this.timeMapper(true)
      },
      endTime: function() {
        return this.timeMapper(false)
      },
      weekday: function() {
        let result = []
        let values = Object.values(courseConfig.WEEKDAY_MAPPER)
        for (let index in values) {
          result.push({
            id: index,
            title: values[index]
          })
        }
        return result
      }
    },
    watch: {
      conflict: function(val) {
        if(val.status) {
          this.$message.error(val.message);
          setTimeout(()=>{
            this.conflict.status = false;
          }, 3000)
        }
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }

  .app-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .status-container {
    padding: 0 0 0 30px;
    flex-grow: 2;
    margin-left: 20px;
    border-left: 1px solid #ececec;
  }

  .apply-form-container {
    flex-grow: 1;
  }

  .status-components {
    margin-top: 35px;
  }

  .form-header {
    margin-left: 50px;
    margin-bottom: 40px;
  }

  .cascader {
    width: 100%;
  }

  .header h2 {
    font-size: 25px;
    font-weight: 400;
  }

  @media screen and (max-width: 1500px) {
    .app-container {
      margin: auto;
      width: 60%;
    }

    .status-container {
      width: 100%;
      margin: auto;
      border-left: none;
      padding: 30px 0 0 0;
      margin-top: 30px;
      margin-left: 35px;
      border-top: 1px solid #ececec;
    }
  }

  @media screen and (max-width: 1300px) {
    .app-container {
      margin: auto;
      width: 65%;
    }
  }

  @media screen and (max-width: 1000px) {
    .app-container {
      margin: auto;
      width: 90%;
    }
  }

  @media screen and (max-width: 700px) {
    .app-container {
      margin: auto;
      width: 100%;
    }
  }
</style>
